<template>
    <el-dialog :visible.sync="isShow" width="1000px" append-to-body>
      <el-row>
        <el-col :span="24" class="top">
          <Search @handleSearch="handleSearch" :formData="formData" :formOptions="formOptions"></Search>
          <!-- <Operate @operateAction="operateAction" :formData="formData"></Operate> -->
          <Table :itemList="itemList" :formData="formData" :dictOptions="dictOptions" selectType="single" @rowClick="rowClick"></Table>
          <pagination
            style="background: #ffffff; height: 50px"
            v-show="totalSize > 0"
            :total="totalSize"
            :page.sync="page"
            :limit.sync="size"
            @pagination="getItemList"
          />
        </el-col>
      </el-row>
    </el-dialog>
</template>
    
  <script>
      import { getItemList, getFormData } from '@/api/interface/operate.js'
      import { getFieldListOptionByFormId, getFieldFormOptionByFormId } from '@/api/interface/form.js'
    export default {
      components: {
      },
      props:{
      },
      data() {
        return {
          page: 1,
          size: 20,
          totalSize: 0,
          itemList: [],
          searchParams: {},
          isShow: false,
          item: '',
          url: '',
          formData: {},
          formOptions: {},
          dictOptions: {}
        }
      },
      watch: {
        item: {
          handler(val){
            console.log('监听item', val)
            this.getFormData()
            this.getFieldFormOptionByFormId()
            this.getFieldListDictFun()
          }
        },
      },
      created(){
        // this.findOpenshopList()
      },
      methods:{
        show(){
          this.isShow = true
          
        },
        close(){
            this.isShow = false
        },
        rowClick(val){
          this.isShow = false
          this.$emit('rowClick', this.item, val)
        },
        handleSearch(searchParams){
          this.searchParams = searchParams
          this.page = 1
          this.getItemList()
        },
        // 获取表单配置数据
        getFormData(){
          getFormData({formId: this.item.relatedForm}).then(res=>{
            if (res.data.code == 10000) {
              this.formData = res.data.data
              // this.$route.meta.fieldList = res.data.data.fieldList
              // this.$route.meta.fieldFormList = res.data.data.fieldFormList
              // this.$route.meta.operateList = res.data.data.operateList
              this.url = this.formData.formModel.url
              this.getItemList()
            }
          })
        },
        // 获取列表数据
        getItemList() {
          this.searchParams.page = this.page
          this.searchParams.size = this.size
          getItemList(this.url, this.searchParams).then(res => {
            if (res.data.code == 10000) {
              this.totalSize = res.data.data.total_count
              this.itemList = res.data.data.list
            }
          });
        },
        // 获取字典
      getFieldFormOptionByFormId(){
        getFieldFormOptionByFormId({
          formId: this.item.form
        }).then(res=>{
          if(res.data.code == 10000){
            this.formOptions = res.data.data
          }
        })
      },
        // 获取字典
        getFieldListDictFun(){
          getFieldListOptionByFormId({
            formId: this.item.form
          }).then(res=>{
            if(res.data.code == 10000){
              this.dictOptions = res.data.data
            }
          })
        },
      }
    }
    </script>
    
    <style lang="scss" scoped>
  
    </style>
    